<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>

    <ProductInfoDetail
      v-show="showStatus[0]"
      @nextStep="nextStep"
      v-model="productObj"
      :isUpdate="isUpdate"
    ></ProductInfoDetail>
    <ProductSaleDetail
      v-show="showStatus[1]"
      @nextStep="nextStep"
      @prevStep="prevStep"
      v-model="productObj"
      :isUpdate="isUpdate"
    ></ProductSaleDetail>
    <ProductAttrDetail
      v-show="showStatus[2]"
      @prevStep="prevStep"
      @finishCommit="finishCommit"
      v-model="productObj"
      :isUpdate="isUpdate"
    ></ProductAttrDetail>
  </el-card>
</template>

<script>
import ProductInfoDetail from "./productInfoDetail.vue";
import ProductSaleDetail from "./productSaleDetail.vue";
import ProductAttrDetail from "./productAttrDetail.vue";

import { addProduct, getProductById, editProductById } from "../../../../api/productApi";

// 定义数据模型  表示一个商品
const defaultProductObj = {
  productCategoryId: null, // 商品分类ID
  productCategoryName: "", // 商品分类名字
  name: "", // 商品名称
  subTitle: "", // 副标题
  productIntro: "", // 商品介绍
  productSn: "", // 商品货号
  originalPrice: null, // 市场价
  price: null, // 商品售价
  store: null, // 商品库存
  sort: null, // 排序
  giftScore: null, // 赠送积分
  giftGrow: null, // 赠送成长值
  publishStatus: 1, // 是否上架
  newsStatus: 1, // 是否新品
  recommendStatus: 1, // 是否推荐
  serviceIds: "", // 服务列表
  netContent: "", // 净含量
  storageCondition: "", // 储存条件
  quality: "", // 保质期
  reductionType: 0, // 优惠选项
  reductionPrice: 0, // 促销价格
  reductionStartTime: null, //特惠开始时间
  reductionEndTime: null, //特惠结束时间
  memberPriceList: [
    // 会员体系价格
    {
      memberLevelId: 1,
      memberLevelName: "黄金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 2,
      memberLevelName: "白金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 3,
      memberLevelName: "钻石会员",
      memberPrice: null,
    },
  ],
  productHomeKillList: [
    // 首页秒杀
    { count: 0, discount: 0 },
  ],
  productAttr: {
    productImgArr: [],
  },
  // pic: "https://gd1.alicdn.com/imgextra/i1/860541377/O1CN01lBblk11M2i8F3H5Dv_!!860541377.jpg_400x400.jpg", // 商品主图片
  // albumPics: "https://gd4.alicdn.com/imgextra/i4/860541377/O1CN01m9VlwY1M2i846q3mA_!!860541377.jpg_400x400.jpg,https://img.alicdn.com/imgextra/i1/2200766936524/O1CN0112Zr511y42fgoYTTk_!!2200766936524.jpg_430x430q90.jpg", // 商品的图片集
  pic: "",
  albumPics: "",
  content: "", // 详情页的内容
  detailHtml: "", // 详情页
};

export default {
  props: {
    // 根据isUpdate，如果是true，表示点击了编辑过来的，如果没有传或传了false，表示点击了添加过来的
    isUpdate: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    if (this.isUpdate) {
      // 点击了编辑过来的

      // 获取点击的那个商品的ID
      let id = this.$route.query.id;

      // 根据ID获取当前商品的信息  根据商品信息实现数据回显
      getProductById({ id: id }).then((res) => {
        if (res.status == 1) {
          let tempProductObj = res.data;
          console.log("tempProductObj:", tempProductObj);

          if (tempProductObj.memberPriceList.length === 0) {
            tempProductObj.memberPriceList = [
              {
                memberLevelId: 1,
                memberLevelName: "黄金会员",
                memberPrice: null,
              },
              {
                memberLevelId: 2,
                memberLevelName: "白金会员",
                memberPrice: null,
              },
              {
                memberLevelId: 3,
                memberLevelName: "钻石会员",
                memberPrice: null,
              },
            ];
          }
          if (tempProductObj.productHomeKillList.length === 0) {
            tempProductObj.productHomeKillList = [{ count: 0, discount: 0 }];
          }

          // 实现数据回显
          this.productObj = tempProductObj;
        }
      });
    }
  },
  data() {
    // 控制步骤条的状态是active  在父中
    // 按钮是子中，子去触发自定义事件，事件触发后，会调用父中的方法
    // 在父的方法中，修改active状态 和 控制哪一屏显示或隐藏
    return {
      productObj: Object.assign({}, defaultProductObj),
      active: 0,
      showStatus: [true, false, false],
    };
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    // 下一步
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        // 一刀，把showStatus中的三个元素全部设置成false
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    // 上一步
    prevStep() {
      if (this.active > 0) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    // 添加商品
    finishCommit(isUpdate) {
      if (isUpdate) {
        // 编辑商品
        this.$confirm("是否要编辑此商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            editProductById(this.productObj).then((res) => {
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "编辑商品成功!",
                });
                this.$router.back();
              } else {
                this.$message.error("编辑商品失败");
              }
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        // 添加商品
        this.$confirm("是否要创建一个新商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            addProduct(this.productObj).then((res) => {
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "添加商品成功!",
                });
                // 一，重新调接口，获取所有的数据，重新渲染   不行
                // 二，使用BOM中的location
                location.reload(); // 刷新   也会重新调接口
              } else {
                this.$message.error("添加商品失败");
              }
              this.getList(); // 删除完后，需要重新获取数据源
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
  components: {
    ProductInfoDetail,
    ProductSaleDetail,
    ProductAttrDetail,
  },
};
</script>

<style scoped>
</style>